<template>
  <!-- 创建时间：2023/4/28 -->
  <!-- 作者：admin -->
  <!-- AllMvsPage组件说明： 歌手全部mv页面-->
    <div class="singer-all-mv">
        <h1>
            {{ singerName }}'s Music Videos
        </h1>
        <div class="singer-mv-list" v-loading="isLoading">
            <el-row v-for="rows in formatData" :key="rows.id" style="margin-bottom: 1vh">
                <el-col :span="4" v-for="(columns,index) in rows.data" :key="columns.id" :offset="index === 0 ? 0 : 1">
                    <list-item :item-description="columns"/>
                </el-col>
            </el-row>
        </div>
        <div class="load-more-mv" v-show="mvs.hasMore">
            <MyButton @click.native="loadMoreMv">
                加载更多
            </MyButton>
        </div>
        <BackToHead/>
    </div>
</template>

<script>
import MyButton from "@/minicomponents/MyButton.vue";
import {getSingersMvs} from "@/http";
import {formatArray} from "@/http/tools";
import {SINGERSMVs} from "@/http/constant";
import ListItem from "@/minicomponents/ListItem.vue";
import BackToHead from "@/minicomponents/BackToHead.vue";

export default {
    name: "AllMvsPage",
    props: ['singerId', 'singerName'],
    components: {BackToHead, ListItem, MyButton},
    data() {
        return {
            offset: 0,
            limit: 15,
            columns: 5,
            isLoading: true,
            hasMore: false,
            mvs: {
                originData: [],
                hasMore: false
            }
        }
    },
    created() {
        const {singerId} = this
        this.loadMvData(singerId)
    },
    methods: {
        loadMoreMv() {
            this.loadMvData(this.singerId)
        },
        // 加载数据
        loadMvData(id) {
            this.isLoading = true
            const {offset, limit} = this
            getSingersMvs(id, limit, offset).then(res => {
                const {mvs, hasMore} = res
                this.mvs = {
                    originData: [...this.mvs.originData, ...mvs],
                    hasMore
                }
                this.offset += limit
                this.isLoading = false
            })
        }
    },
    computed: {
        formatData() {
            const {mvs: {originData}, columns} = this
            const originMvs = formatArray(originData.length / columns, columns, originData)
            return originMvs.map(rowItem => {
                return {
                    id: rowItem.id,
                    data: rowItem.data.map(columnItem => {
                        const author = columnItem.publishTime
                        const picUrl = columnItem.imgurl16v9
                        return {
                            id: columnItem.id,
                            title: columnItem.name,
                            picUrl,
                            hasPlayCount: false,
                            isCircle: false,
                            hasAuthor: true,
                            titleIsLeft: true,
                            author,
                            itemType: SINGERSMVs,
                            hasPlayIcon: false
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
.singer-all-mv {
  > h1 {
    font-size: 2.5vw;
    //font-weight: 700;
    margin-top: 0;
  }
}
</style>